<template name="cardInput" ref="cardInput">
  <view>
    <view @click="vanish()"  :style="styles" class="id_bgk"></view>
    <view :style="styles" class="id_content">
      <view class="id_box">
        <view class="id_title"> 请输入身份证号 </view>
        <input type="text" v-model="cardID" placeholder="请输入身份证号" />
        <view class="id_tips"> {{ errorMsg }}</view>
        <view class="id_btnGroup">
          <button @click="cancel()">重置</button
          ><button @click="sure()" >确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      styles: "display:none;",
      cardID: "", //身份证号
      errorMsg: "请在上方输入身份证号",
    };
  },
  created() {
	  let user=uni.getStorageSync("user");
	  if(!user){
		  this.styles="";
	  }else if(this.url){
		  uni.navigateTo({
		  	url:this.url
		  })
	  }
  	
  },
  methods: {
    sure() {
      if (!this.cardID) {
        this.errorMsg = "请输入身份证号";
        return;
      }
      // 身份证格式验证
      let patrn =
        /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      if (patrn.test(this.cardID)) {
		  let data={
		  	"kh0000":this.cardID,
		  	"klx000":"3",
		  	"ywlsh0":""+ new Date().getTime(),
		  	"funid":"F07.02.02.01"
		  }
		 
		  uni.showLoading({
		  	mask:true,
			title:"加载中..."
		  })
		  this.$postJson("/qnyesb/qnyesbproxy",data,res=>{
		  	//判断用户不存在档案信息则进行跳转
		  	if(res.state==0){
				let user=res.data;
				user.kh0000=this.cardID;
		  		uni.setStorageSync("user",res.data);
		  		//this.$emit("checked", this.cardID);
		  		this.select();
				
				if(location.href.indexOf("person")){
					location.reload();
				}
				
		  	}else{
				this.styles="display:none;";
		  		uni.navigateTo({
		  			url:"../bindInfo/bindInfo?kh0000="+this.cardID
		  		})
		  	}
		  	uni.hideLoading();
		  })
      } else {
        this.errorMsg = "身份证格式错误";
      }
    },
	vanish(){
		this.cardID = "";
		this.select();
	},
    cancel() {
      this.cardID = "";
      //this.select();
    },
	params(option){
		this.params=option;
	},
    select() {
      if (this.styles == "") {
        this.styles = "display:none;";
		if(this.url){
		  uni.navigateTo({
			url:this.params.url
			
		  })
		}
      } else {
        this.styles = "";
      }
	 
    },
  },

  watch: {
    cardID: function (val) {
      if (val) {
        this.errorMsg = "";
      } else {
        this.errorMsg = "请输入身份证号";
      }
    },
  },
};
</script>

<style scoped>
.id_bgk {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: rgba(0, 0, 0, 0.39);
  top: 0;
  left: 0;
}

.id_content {
  position: fixed;
  z-index: 999;
  top: 160px;
  left: 0;
  right: 0;
  width: 100%;
}

.id_box {
  z-index: 998;
  width: 80%;
  height: 180px;
  margin:0 auto;
  background-color: rgb(255, 255, 255);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
/* 标题 */
.id_title {
  color: #333;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 6px 10px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.id_box input {
  border: 1px solid #e6e6e6;
  width: 80%;
  font-size: 16px;
  border-radius: 6px;
  padding: 4px 10px;
  margin: 0 auto;
}

/* 错误提示 */
.id_tips {
  font-size: 14px;
  text-align: center;
  color: red;
  margin: 6px 0;
}
/* 按钮box */
.id_btnGroup {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  width: 100%;
  bottom: 0;
}
/* 取消按钮默认样式 */
.id_btnGroup button::after {
  border: none;
}
.id_btnGroup button {
  border: 0;
  outline: 0;
  width: 50%;
  border-radius: 0;
  padding: 2px;
  background-color: #fff;
  border-top: 1px solid #ebebeb;
  font-size: 14px;
  color: #878787;
}
/* 取消按钮 */
.id_btnGroup button:first-child {
  border-right: 1px solid #ebebeb;
}
/* 确认按钮 */
.id_btnGroup button:last-child {
  color: #4c9eff;
}
</style>
